<!DOCTYPE html>
<html>

<head>
  {include file="common/meta" /}
</head>

<body class="form-wrap">
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header">添加系统配置</div>
      <div class="layui-card-body" style="padding: 15px;">
        <form class="layui-form" method="post" enctype="multipart/form-data">
          <!-- 配置的标题 -->
          <div class="layui-form-item">
            <label class="layui-form-label" style="width:130px;">配置的标题</label>
            <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
              <input type="text" name="title" placeholder="请输入配置标题" required class="layui-input" />
            </div>
          </div>

          <!-- 配置的名称 -->
          <div class="layui-form-item">
            <label class="layui-form-label" style="width:130px;">配置的名称</label>
            <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
              <input type="text" name="key" placeholder="配置的名称" required class="layui-input" />
            </div>
          </div>

          <!-- 配置的类型 -->
          <div class="layui-form-item">
            <label class="layui-form-label" style="width:130px;">配置的类型</label>
            <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
              <select name="type" lay-verify="required" lay-filter="type">
                <option value="text">文本</option>
                <option value="file">文件</option>
              </select>
            </div>
          </div>

          <!-- 配置的值 文本类型 -->
          <div class="layui-form-item" id="text">
            <label class="layui-form-label" style="width:130px;">配置的值(文本类型)</label>
            <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
              <input type="text" name="value" placeholder="配置的值" class="layui-input" />
            </div>
          </div>

          <div class="layui-form-item" id="file" hidden>
            <label class="layui-form-label" style="width:130px;">
              配置的值(文件类型)
            </label>
            <div class="layui-input-block layui-col-lg4" style="margin-left:0;">
              <div class="layui-upload">
                <button type="button" class="layui-btn" id="type">
                  上传文件
                </button>
                <div class="layui-upload-list">
                  <!-- 预览图片 -->
                  <img class="layui-upload-img" id="preview" />
                </div>
              </div>
            </div>
          </div>

          <!-- 提交 -->
          <div class="layui-form-item">
            <div class="layui-input-block">
              <div class="layui-footer" style="left: 0;">
                <button class="layui-btn">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>

<script>
  function back() {
    window.location.href = "{:url('admin/config/index')}"
  }
  // 参数1：引入内置的功能模块
  // 参数2：自动触发，当引入模块后自动调用的回调函数
  layui.use(['layer', 'jquery', 'form', 'upload'], function () {
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.jquery;
    var upload = layui.upload;

    // 切换文本类型
    form.on('select(type)', function (data) {
      console.log("ok");
      var value = data.value;
      if (value == 'text') {
        $('#text').attr('hidden', false);
        $('#file').attr('hidden', true);
      } else {
        $('#text').attr('hidden', true);
        $('#file').attr('hidden', false);
      }
    })

    // 文件上传,并提交表单
    var uploadInst = upload.render({
      elem: '#type', // 绑定元素
      auto: false, // 上传接口
      field: "value", // 设置文件的字段名称

      // 选择文件后的回调函数
      choose: function (obj) {
        // 预读本地文件示例，不支持ie8
        obj.preview(function (index, file, result) {
          // 设置显示预览图片
          $("#preview").attr('src', result);
        })
      }
    })
  })
</script>

</html>